<template>
    <div id="map-container">
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import * as turf from '@turf/turf';
import axios from 'axios';

var map, pl, loca, geojsonLayer1, geojsonLayer2, chinaJson, viaMarkers1 = [], viaMarkers2 = [], text1 = [], text2 = [];
var triangleZMarker1, triangleZMarker2, scatterBlue1, scatterBlue2;
export default {
    name: 'MapAnimation',
    props: {
        areaRank: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            map: null,
            pl: null,
            loca: null,
            chinaJson: null,
            speed: 1,
            xinqu: false
        }
    },
    watch: {
        areaRank: function (val) {
            this.loadGeoJsonXian();
            this.loadGeoJsonXinqu();
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initMap();
        })
    },
    methods: {
        initMap() {
            let that = this;
            AMapLoader.load({
                "key": "cc0bea0ffe220270390a35e94ff0258f",// 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": [],
                "Loca": {// 是否加载 Loca， 缺省不加载
                    "version": '2.0.0'// Loca 版本，缺省 1.3.2
                },
            }).then((AMap) => {
                let bounds = [[109.754502, 34.212239], [109.739996, 34.217219], [109.731074, 34.236337], [109.691069, 34.243003], [109.668562, 34.238586], [109.659122, 34.245894], [109.627751, 34.240031], [109.575831, 34.262516], [109.523622, 34.255851], [109.500252, 34.268698], [109.477688, 34.294465], [109.456045, 34.298237], [109.450577, 34.326724], [109.458981, 34.350869], [109.461859, 34.394169], [109.445799, 34.397376], [109.442633, 34.414128], [109.423753, 34.423505], [109.424501, 34.441934], [109.413277, 34.46068], [109.391346, 34.468529], [109.399692, 34.49976], [109.391346, 34.529138], [109.418054, 34.536741], [109.429106, 34.549385], [109.449771, 34.553625], [109.437222, 34.595621], [109.42335, 34.679548], [109.430775, 34.688016], [109.421163, 34.706866], [109.429854, 34.713814], [109.410859, 34.743117], [109.365098, 34.739285], [109.358651, 34.716929], [109.340749, 34.69872], [109.286641, 34.687697], [109.280424, 34.697442], [109.254176, 34.6988], [109.243873, 34.687297], [109.203407, 34.697682], [109.173072, 34.691931], [109.168237, 34.666525], [109.156034, 34.644709], [109.139053, 34.639514], [109.138823, 34.588823], [109.108891, 34.577705], [109.092889, 34.588983], [109.06123, 34.593542], [109.011842, 34.586184], [108.998315, 34.576426], [108.955201, 34.565866], [108.974081, 34.541383], [108.971146, 34.502962], [108.976441, 34.44594], [108.955834, 34.444979], [108.961015, 34.424787], [108.929817, 34.40443], [108.913469, 34.406033], [108.89292, 34.390802], [108.859879, 34.388638], [108.828048, 34.365947], [108.803239, 34.359531], [108.794316, 34.334185], [108.796792, 34.296713], [108.750282, 34.296151], [108.744756, 34.276886], [108.700952, 34.273675], [108.692087, 34.238987], [108.669753, 34.243966], [108.650125, 34.265808], [108.619444, 34.25826], [108.593369, 34.239308], [108.56407, 34.22959], [108.529706, 34.23216], [108.468115, 34.205731], [108.457351, 34.209186], [108.425922, 34.200348], [108.418266, 34.20549], [108.37452, 34.207659], [108.351495, 34.196812], [108.328585, 34.195928], [108.293185, 34.209989], [108.264865, 34.199464], [108.237638, 34.199625], [108.20195, 34.221718], [108.156534, 34.225092], [108.143928, 34.218585], [108.086769, 34.231036], [108.027941, 34.228144], [108.030013, 34.208623], [108.011421, 34.161047], [108.003074, 34.155742], [108.00106, 34.103953], [107.976481, 34.075069], [107.972567, 34.062113], [107.943038, 34.042312], [107.941944, 34.006079], [107.949887, 33.985379], [107.915638, 33.986104], [107.908213, 33.999314], [107.87759, 33.993918], [107.846564, 33.975148], [107.8103, 33.995045], [107.784455, 33.980626], [107.76736, 33.954521], [107.71377, 33.92736], [107.717626, 33.910431], [107.704387, 33.857282], [107.708589, 33.846794], [107.697422, 33.817903], [107.679463, 33.808298], [107.68591, 33.796996], [107.665821, 33.760013], [107.687924, 33.744746], [107.695868, 33.72366], [107.719353, 33.725761], [107.737427, 33.717923], [107.763503, 33.719781], [107.830102, 33.69788], [107.854278, 33.694081], [107.90309, 33.748947], [107.931583, 33.731255], [107.951672, 33.745797], [107.96612, 33.734648], [108.008312, 33.728993], [108.054247, 33.709842], [108.073818, 33.723417], [108.098396, 33.723498], [108.113823, 33.712589], [108.132243, 33.721882], [108.149281, 33.712347], [108.180191, 33.711862], [108.191761, 33.725276], [108.233148, 33.726649], [108.259281, 33.754763], [108.288292, 33.767282], [108.307, 33.76292], [108.345969, 33.793848], [108.369454, 33.793202], [108.404855, 33.763324], [108.443709, 33.781979], [108.466445, 33.800629], [108.484405, 33.804262], [108.544557, 33.788438], [108.560444, 33.765101], [108.584274, 33.764536], [108.585425, 33.780122], [108.602579, 33.791426], [108.617717, 33.825974], [108.650067, 33.841549], [108.697843, 33.828315], [108.741014, 33.841468], [108.755923, 33.839048], [108.756038, 33.812657], [108.778487, 33.798046], [108.805771, 33.817177], [108.84002, 33.815966], [108.854238, 33.826539], [108.874788, 33.824522], [108.913239, 33.848649], [108.922161, 33.869383], [108.944265, 33.86664], [109.007985, 33.883256], [109.051502, 33.923169], [109.070555, 33.906641], [109.107682, 33.907609], [109.120576, 33.876481], [109.164207, 33.871319], [109.18493, 33.874303], [109.207379, 33.867043], [109.251874, 33.880675], [109.289462, 33.87027], [109.299823, 33.856556], [109.316918, 33.85462], [109.355945, 33.867608], [109.399059, 33.845422], [109.442518, 33.843566], [109.470263, 33.851796], [109.508541, 33.848004], [109.537322, 33.862042], [109.540142, 33.875513], [109.576118, 33.897691], [109.592984, 33.896804], [109.603633, 33.940982], [109.562994, 33.960726], [109.533235, 33.982077], [109.545496, 34.025244], [109.56121, 34.034181], [109.552806, 34.044727], [109.567139, 34.064688], [109.584235, 34.072092], [109.634313, 34.075633], [109.658835, 34.105481], [109.669886, 34.099931], [109.694753, 34.109101], [109.739824, 34.09792], [109.742184, 34.12189], [109.755078, 34.127197], [109.78098, 34.160083], [109.789787, 34.145049], [109.822194, 34.155742], [109.801415, 34.160887], [109.778102, 34.183392], [109.745465, 34.187491], [109.754502, 34.212239], [109.174166, 33.808702], [109.162366, 33.812657], [109.147284, 33.799337], [109.154019, 33.791103], [109.174166, 33.808702]];
                var mask = []
                for (var i = 0; i < bounds.length; i += 1) {
                    mask.push([bounds[i]])
                }
                map = new AMap.Map('map-container', {
                    zoom: 3,
                    // mask: mask,
                    viewMode: '3D',
                    pitch: 60,
                    showBuildingBlock: false,
                    showLabel: false,
                    terrain: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    resizeEnable: true,
                    rotation: 0,
                    mapStyle: "amap://styles/dark",
                    // mapStyle: 'amap://styles/51ff0c8149c06c5d409eba284ad36734',
                    skyColor: '#2A2A2A',
                    layer: [
                        new AMap.TileLayer.RoadNet({
                            //rejectMapMask:true
                        }),
                        new AMap.TileLayer.Satellite()
                    ]
                });
                map.on('click', function () {
                    console.log(map.getCenter());
                })
                loca = new Loca.Container({
                    map: map
                })
                var geo = new Loca.GeoJSONSource({
                    url: 'https://img.cyeyi.com/databoard/geojson/jinhui.geojson',
                });
                pl = new Loca.PolygonLayer({
                    // loca,
                    zIndex: 120,
                    opacity: 1,
                    // cullface: 'none',
                    shininess: 1,
                    hasSide: true,
                });
                pl.setSource(geo);
                pl.setStyle({
                    // topColor: (index, feature)=>{
                    //     return feature.properties.color
                    // },
                    // sideTopColor: function (index, feature) {
                    //   return feature.properties.color
                    // },
                    // sideBottomColor: function (index, feature) {
                    //   return feature.properties.color
                    // },
                    // 顶面
                    topColor: '#D8DAF2',
                    // 侧顶面
                    // sideTopColor: '#687982',
                    // 侧底面
                    // sideBottomColor: '#687982',
                    // unit: 'meter',
                    height: function (index, feature) {
                        return feature.properties.h
                    },
                    textureSize: [300, 200],
                    // texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/windows.jpg',
                    texture: 'https://xxxxxxxxxxxxx.oss-cn-beijing.aliyuncs.com/pictures/Albedo1.png'
                    // altitude: 0,
                });
                pl.on('click', function (e) {
                    console.log('plClick');
                })
                loca.add(pl);
                this.addMarker1();
                this.addMarker2();
                // this.addLight();
                if (this.xinqu) {
                    triangleZMarker1.hide();
                    scatterBlue1.hide();
                } else {
                    triangleZMarker2.hide();
                    scatterBlue2.hide();
                }
                AMap.plugin(
                    ["AMap.ControlBar", "AMap.ToolBar", "AMap.Scale", "AMap.GeoJSON", "AMap.DistrictSearch"],
                    () => {
                        // //异步加载插件
                        // var controlBar = new AMap.ControlBar({
                        //     //控制地图旋转插件
                        //     position: {
                        //         right: "10px",
                        //         top: "10px",
                        //     },
                        // });
                        // map.addControl(controlBar);
                        // var toolBar = new AMap.ToolBar({
                        //     //地图缩放插件
                        //     position: {
                        //         right: "40px",
                        //         top: "110px",
                        //     },
                        // });
                        // map.addControl(toolBar);
                        // var scale = new AMap.Scale();
                        // map.addControl(scale);

                        axios.get("https://img.cyeyi.com/databoard/geojson/100000_full.json").then((geoJSON) => {
                            chinaJson = new AMap.GeoJSON({
                                geoJSON: geoJSON.data,
                                // 还可以自定义getMarker和getPolyline
                                getPolygon: function (geojson, lnglats) {
                                    var fillColor;
                                    // 陕西高亮，其他省份浅色显示
                                    if (geojson.properties.name === '陕西省') {
                                        fillColor = 'rgba(42,52,79,0.8)'; // 高亮颜色
                                    } else {
                                        fillColor = 'rgba(230,230,230)'; // 浅色颜色
                                    }
                                    // 创建一个多边形覆盖
                                    var polygon = new AMap.Polygon({
                                        path: lnglats,
                                        fillOpacity: 0.5,// 面积越大透明度越高
                                        strokeColor: 'white',
                                        fillColor: fillColor
                                    });

                                    return polygon;
                                }
                            });
                            map.add(chinaJson);
                        });
                        that.loadGeoJsonXian();
                        that.loadGeoJsonXinqu();

                        loca.animate.start();
                        this.animate1();
                    })
                // 在缩放结束时检查新的缩放等级
                map.on('zoomchange', () => {
                    var zoom = map.getZoom();
                    if (zoom < 16) {
                        let pixel = map.lngLatToContainer([108.966079, 34.179987]);
                        this.$emit('setTipShow', false, pixel);
                    }
                    if (zoom >= 13) {
                        geojsonLayer1 && geojsonLayer1.hide();
                        geojsonLayer2 && geojsonLayer2.hide();
                    } else {
                        if (this.xinqu) {
                            geojsonLayer2 && geojsonLayer2.show();
                        } else {
                            geojsonLayer1 && geojsonLayer1.show();
                        }
                    }
                    if (zoom >= 7) {
                        chinaJson && chinaJson.hide();
                    } else {
                        chinaJson && chinaJson.show();
                    }
                });

            }).catch(e => {
                console.log(e);
            })
        },
        loadGeoJsonXian() {
            if(geojsonLayer1) {
                map.remove(geojsonLayer1);
            }
            if(text1.length > 0) {
                for (const item of text1) {
                    map.remove(item);
                }
            }
            let that = this;
            text1 = [];
            axios.get("https://img.cyeyi.com/databoard/geojson/xian.geojson").then((geoJSON) => {
                geojsonLayer1 = new AMap.GeoJSON({
                    geoJSON: geoJSON.data,
                    // 还可以自定义getMarker和getPolyline
                    getPolygon: function (geojson, lnglats) {
                        // 计算面积
                        // var area = AMap.GeometryUtil.ringArea(lnglats[0])
                        // var colors = ['', 'rgba(0,32,64,0.8)', 'rgba(0,13,26,0.8)', 'rgba(0,51,102,0.8)', 'rgba(51,101,165,0.8)', 'rgba(0,0,51,0.8)', 'rgba(0,0,153,0.8)', 'rgba(0,61,153,0.8)', 'rgba(0,81,204,0.8)', 'rgba(36,36,143,0.8)', 'rgba(0,34,51,0.8)', 'rgba(0,102,153,0.8)', 'rgba(19,38,57,0.8)', 'rgba(32,32,96,0.8)', 'rgba(41,02,102,0.8)', 'rgba(51,0,102,0.8)'];
                        let color = geojson.properties.color;
                        let rank = 0;
                        if (that.areaRank[geojson.properties.areaCode]) {
                            rank = that.areaRank[geojson.properties.areaCode];
                        }
                        // 创建一个多边形覆盖
                        var polygon = new AMap.Polygon({
                            path: lnglats,
                            // height: 1000,
                            extrusionHeight: 3000 + rank * 1000,
                            fillOpacity: 0.5,// 面积越大透明度越高
                            strokeColor: 'white',
                            bubble: true,
                            roofColor: (geojson.properties.areaCode == that.$parent.getAreaCode() && geojson.properties.areaCode != 0) ? 'rgba(120,155,211,0.8)' : color,
                            wallColor: (geojson.properties.areaCode == that.$parent.getAreaCode() && geojson.properties.areaCode != 0)  ? 'rgba(120,155,211,0.8)' : '#5C6888',
                            // fillColor: 'rgba(5,39,175)'
                            // fillColor: 'rgba(16, 66, 108)'
                        });
                        polygon.on('mouseover', (event) => {
                            polygon.setOptions({
                                roofColor: 'rgba(120,155,211,0.8)',
                                wallColor: 'rgba(120,155,211,0.8)',
                            })
                            that.$emit('setInfoWindowPosition', event.pixel, geojson.properties.areaCode);
                        });
                        polygon.on('mouseout', (event) => {
                            that.$emit('setInfoWindowShow', false);
                            if (geojson.properties.areaCode != that.$parent.getAreaCode()) {
                                polygon.setOptions({
                                    roofColor: color,
                                    wallColor: '#5C6888',
                                })
                            }
                        });
                        polygon.on('click', (e) => {
                            var color1 = [];
                            geojsonLayer1._opts.geoJSON.features.forEach((item, index) => {
                                color1[index] = item.properties.color;
                            })
                            geojsonLayer1.eachOverlay((overlay, index, collections) => {
                                overlay.setOptions({
                                    roofColor: color1[index],
                                    wallColor: '#5C6888'
                                });
                            });
                            if (geojson.properties.adcode == 610113) {
                                that.animate2();
                            } else {
                                polygon.setOptions({
                                    roofColor: 'rgba(120,155,211,0.8)',
                                    wallColor: 'rgba(120,155,211,0.8)',
                                })
                                if ((geojson.properties.areaCode || 0) > 0) {
                                    that.$emit('changeArea', geojson.properties.areaCode);
                                }
                            }
                        });

                        // 添加标记点
                        let center = geojson.properties.center;
                        var text = new AMap.Text({
                            text: geojson.properties.name,
                            anchor: 'center', // 设置文本标记锚点
                            draggable: false,
                            cursor: 'pointer',
                            angle: 0,
                            style: {
                                'padding': '.75rem 1.25rem',
                                'margin-bottom': '1rem',
                                'border-radius': '.25rem',
                                'background-color': 'rgba(0,0,0,0)',
                                'width': '15rem',
                                'border-width': 0,
                                'text-align': 'center',
                                'font-size': '1.5vh',
                                'color': '#fff'
                            },
                            position: [center[0], center[1]]
                        });
                        text.setMap(map);
                        text1.push(text);

                        // // 计算多边形覆盖的中心点
                        // var center = polygon.getBounds().getCenter();

                        // // 创建并添加一个标记，使用行政区区域的properties.name属性为标签设置文本
                        // var marker = new AMap.Marker({
                        //   position: center,
                        //   content: geojson.properties.name,
                        //   map: map
                        // });

                        return polygon;
                    }
                });
                map.add(geojsonLayer1);
                if (this.xinqu) {
                    geojsonLayer1.hide();
                    for (const marker of text1) {
                        marker.hide();
                    }
                }
            });
        },
        loadGeoJsonXinqu() {
            if(geojsonLayer2) {
                map.remove(geojsonLayer2);
            }
            if(text2.length > 0) {
                for (const item of text2) {
                    map.remove(item);
                }
            }
            let that = this;
            text2 = [];
            axios.get("https://img.cyeyi.com/databoard/geojson/xinqu.geojson").then((geoJSON) => {
                geojsonLayer2 = new AMap.GeoJSON({
                    geoJSON: geoJSON.data,
                    // 还可以自定义getMarker和getPolyline
                    getPolygon: function (geojson, lnglats) {
                        // 计算面积
                        // var area = AMap.GeometryUtil.ringArea(lnglats[0])
                        // var colors = ['', 'rgba(0,32,64,0.8)', 'rgba(0,13,26,0.8)', 'rgba(0,51,102,0.8)', 'rgba(51,101,165,0.8)', 'rgba(0,0,51,0.8)', 'rgba(0,0,153,0.8)', 'rgba(0,61,153,0.8)', 'rgba(0,81,204,0.8)', 'rgba(36,36,143,0.8)', 'rgba(0,34,51,0.8)', 'rgba(0,102,153,0.8)', 'rgba(19,38,57,0.8)', 'rgba(32,32,96,0.8)', 'rgba(41,02,102,0.8)', 'rgba(51,0,102,0.8)'];
                        // let color = colors[geojson.properties.adcode % 6101000];
                        let color = geojson.properties.color;
                        let rank = 0;
                        if (that.areaRank[geojson.properties.areaCode]) {
                            rank = that.areaRank[geojson.properties.areaCode];
                        }
                        // 创建一个多边形覆盖
                        var polygon = new AMap.Polygon({
                            path: lnglats,
                            // height: 1000,
                            extrusionHeight: 1000 + rank * 1000,
                            fillOpacity: 0.5,// 面积越大透明度越高
                            strokeColor: 'white',
                            bubble: true,
                            roofColor: (geojson.properties.areaCode == that.$parent.getAreaCode() && geojson.properties.areaCode != 0)  ? 'rgba(120,155,211,0.8)' : color,
                            wallColor: (geojson.properties.areaCode == that.$parent.getAreaCode() && geojson.properties.areaCode != 0)  ? 'rgba(120,155,211,0.8)' : '#5C6888',
                            // wallColor: '#5C6888',
                            // fillColor: 'rgba(5,39,175)'
                            // fillColor: 'rgba(16, 66, 108)'
                        });
                        polygon.on('mouseover', (event) => {
                            polygon.setOptions({
                                roofColor: 'rgba(120,155,211,0.8)',
                                wallColor: 'rgba(120,155,211,0.8)',
                            })
                            that.$emit('setInfoWindowPosition', event.pixel, geojson.properties.areaCode);
                        });
                        polygon.on('mouseout', (event) => {
                            that.$emit('setInfoWindowShow', false);
                            if (geojson.properties.areaCode != that.$parent.getAreaCode()) {
                                polygon.setOptions({
                                    roofColor: color,
                                    wallColor: '#5C6888',
                                })
                            }
                        });
                        polygon.on('click', (e) => {
                            var color1 = [];
                            geojsonLayer2._opts.geoJSON.features.forEach((item, index) => {
                                color1[index] = item.properties.color;
                            })
                            geojsonLayer2.eachOverlay((overlay, index, collections) => {
                                overlay.setOptions({
                                    roofColor: color1[index],
                                    wallColor: '#5C6888'
                                });
                            });
                            if (geojson.properties.adcode == 6101001) {
                                that.animate2();
                            } else {
                                polygon.setOptions({
                                    roofColor: 'rgba(120,155,211,0.8)',
                                    wallColor: 'rgba(120,155,211,0.8)',
                                })
                                if ((geojson.properties.areaCode || 0) > 0) {
                                    that.$emit('changeArea', geojson.properties.areaCode);
                                }
                            }
                        });

                        // 添加标记点
                        let center = geojson.properties.center;
                        var text = new AMap.Text({
                            text: geojson.properties.name,
                            anchor: 'center', // 设置文本标记锚点
                            draggable: false,
                            cursor: 'pointer',
                            angle: 0,
                            style: {
                                'padding': '.75rem 1.25rem',
                                'margin-bottom': '1rem',
                                'border-radius': '.25rem',
                                'background-color': 'rgba(0,0,0,0)',
                                'width': '15rem',
                                'border-width': 0,
                                'text-align': 'center',
                                'font-size': '1.5vh',
                                'color': '#fff'
                            },
                            position: [center[0], center[1]]
                        });
                        text.setMap(map);
                        text2.push(text);
                        return polygon;
                    }
                });
                map.add(geojsonLayer2);
                if (!this.xinqu) {
                    geojsonLayer2.hide();
                    for (const marker of text2) {
                        marker.hide();
                    }
                }
            });
        },
        changeAreaAction(code) {
            var geoIndex, color1 = [], color2 = [];
            geojsonLayer1._opts.geoJSON.features.forEach((item, index) => {
                if (item.properties.areaCode == code) {
                    geoIndex = index;
                }
                color1[index] = item.properties.color;
            })
            if (geoIndex !== undefined) {
                if (this.xinqu) this.changeJson();
                geojsonLayer1.eachOverlay((overlay, index, collections) => {
                    if (index === geoIndex) {
                        overlay.setOptions({
                            roofColor: 'rgba(120,155,211,0.8)',
                            wallColor: 'rgba(120,155,211,0.8)'
                        });
                    } else {
                        overlay.setOptions({
                            roofColor: color1[index],
                            wallColor: '#5C6888'
                        });
                    }
                });
                return;
            } else {
                geojsonLayer2._opts.geoJSON.features.forEach((item, index) => {
                    if (item.properties.areaCode == code) {
                        geoIndex = index;
                    }
                    color2[index] = item.properties.color;
                })
                if (geoIndex !== undefined) {
                    if (!this.xinqu) this.changeJson();
                    geojsonLayer2.eachOverlay((overlay, index, collections) => {
                        if (index === geoIndex) {
                            overlay.setOptions({
                                roofColor: 'rgba(120,155,211,0.8)',
                                wallColor: 'rgba(120,155,211,0.8)'
                            });
                        } else {
                            overlay.setOptions({
                                roofColor: color2[index],
                                wallColor: '#5C6888'
                            });
                        }
                    });
                }
            }
        },
        animate1() {
            map.setZoom(2, true);
            map.setCenter([108.967737, this.xinqu ? 34.255968 : 34.155968], true);
            loca.viewControl.addAnimates([
                {
                    zoom: {
                        value: this.xinqu ? 11 : 9,
                        control: [[0, 5], [1, 9]],
                        timing: [0.3, 0, 0.7, 1],
                        duration: 2500 / this.speed,
                    },
                    // rotation: {
                    //     value: 0,
                    //     control: [[0, 20], [1, 0]],
                    //     timing: [0, 0, 0.8, 1],
                    //     duration: 2000 / this.speed,
                    // },
                    pitch: {
                        value: 40,
                        control: [[0, 10], [1, 30]],
                        timing: [0, 0, 1, 1],
                        duration: 2000 / this.speed,
                    },
                }
            ])

        },
        animate2() {
            map.setZoom(9, true);
            map.setCenter([108.970486, 34.155568], true);
            loca.viewControl.addAnimates([
                {
                    zoom: {
                        value: 17,
                        control: [[0, 14], [1, 17]],
                        timing: [0.3, 0, 0.7, 1],
                        duration: 2500 / this.speed,
                    },
                    rotation: {
                        value: -10,
                        control: [[0, -120], [1, -50]],
                        timing: [0, 0, 0.8, 1],
                        duration: 3000 / this.speed,
                    },
                    center: {
                        value: [108.967537, 34.180916],
                        control: [[108.970486, 34.155968], [108.967437, 34.179916]],
                        timing: [0, 0, 1, 1],
                        duration: 2000 / this.speed,
                    },
                    pitch: {
                        value: 50,
                        control: [[0, 0], [1, 100]],
                        timing: [0, 0, 1, 1],
                        duration: 2000 / this.speed,
                    },
                }
            ])
            setTimeout(() => {
                //显示提示
                let pixel = map.lngLatToContainer([108.966079, 34.179987]);
                this.$emit('setTipShow', true, pixel);
            }, 3000)
            setTimeout(() => {
                map.setStatus({
                    dragEnable: false,
                    keyboardEnable: false,
                    doubleClickZoom: false,
                    zoomEnable: false,
                    rotateEnable: false
                });
            }, 5000)
            // let polyline = new AMap.Polyline({
            //     path: [[108.966253,
            //         34.182163], [108.965635,
            //         34.18151]], // add your line path here
            //     strokeColor: "#FF0000",
            //     strokeWeight: 4,
            //     strokeOpacity: 0.5,
            //     strokeStyle: "solid",
            //     zIndex: 50,
            //     height: 100
            // });

            // map.add(polyline);
        },
        addMarker1() {
            var geo2 = new Loca.GeoJSONSource({
                data: {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.959903,
                                    34.26927]
                            },
                            "properties": {
                                "name": "新城区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    108.933194,
                                    34.2656
                                ]
                            },
                            "properties": {
                                "name": "莲湖区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.067261,
                                    34.267453]
                            },
                            "properties": {
                                "name": "灞桥区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.946022,
                                    34.30823]
                            },
                            "properties": {
                                "name": "未央区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.926593,
                                    34.203389]
                            },
                            "properties": {
                                "name": "雁塔区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.32802,
                                    34.662141]
                            },
                            "properties": {
                                "name": "阎良区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.313986,
                                    34.372065]
                            },
                            "properties": {
                                "name": "临潼区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.941579,
                                    34.037097]
                            },
                            "properties": {
                                "name": "长安区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.088896,
                                    34.535065]
                            },
                            "properties": {
                                "name": "高陵区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.607385,
                                    34.008668]
                            },
                            "properties": {
                                "name": "鄠邑区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.317634,
                                    34.056189]
                            },
                            "properties": {
                                "name": "蓝田县"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.116465,
                                    33.901532]
                            },
                            "properties": {
                                "name": "周至县"
                            }
                        },
                    ]
                }
            });
            // 文字主体图层
            // var zMarker = new Loca.ZMarkerLayer({
            //     loca: loca,
            //     zIndex: 120,
            //     depth: false
            // });
            // zMarker.setSource(geo2);

            // zMarker.setStyle({
            //     content: (i, feat) => {
            //         var props = feat.properties;
            //         var leftColor = 'rgba(33,33,33,0.6)';
            //         var rightColor = 'rgba(172, 137, 51, 0.3)';
            //         var borderColor = 'rgba(172, 137, 51, 1)';
            //         return (
            //             '<div style="width: 490px; height: 228px; padding: 0 0;">' +
            //             '<p style="display: block; height:80px; line-height:80px;font-size:40px;background-image: linear-gradient(to right, '
            //             + leftColor + ',' + leftColor + ',' + rightColor + ',rgba(0,0,0,0.4)); border:4px solid '
            //             + borderColor + '; color:#fff; border-radius: 15px; text-align:center; margin:0; padding:5px;">' +
            //             props['name'] +
            //             ': ' +
            //             '</p><span style="width: 130px; height: 130px; margin: 0 auto; display: block; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/prism_'
            //             + (true ? 'blue' : 'yellow') + '.png);"></span></div>'
            //         );
            //     },
            //     unit: 'meter',
            //     rotation: 0,
            //     alwaysFront: true,
            //     size: [29000, 20200],
            //     altitude: 0
            // });
            // 浮动三角
            triangleZMarker1 = new Loca.ZMarkerLayer({
                loca: loca,
                zIndex: 119,
                zooms: [2, 10],
                depth: false
            });
            triangleZMarker1.setSource(geo2);
            triangleZMarker1.setStyle({
                content: (i, feat) => {
                    return (
                        '<div style="width: 120px; height: 120px; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/triangle_blue.png);"></div>'
                    );
                },
                unit: 'meter',
                rotation: 0,
                alwaysFront: true,
                size: [18000, 18000],
                altitude: 50
            });
            triangleZMarker1.addAnimate({
                key: 'altitude',
                value: [0, 50],
                random: true,
                transform: 1000,
                delay: 2000,
                yoyo: true,
                repeat: 999999,
            });
            // 呼吸点 蓝色
            scatterBlue1 = new Loca.ScatterLayer({
                loca,
                zIndex: 110,
                opacity: 1,
                visible: true,
                zooms: [2, 10],
                depth: false,
            });

            scatterBlue1.setSource(geo2);
            scatterBlue1.setStyle({
                unit: 'meter',
                size: [18000, 18000],
                texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_blue.png',
                altitude: 50,
                duration: 2000,
                animate: true,
                visible: true
            });
        },
        addMarker2() {
            var geo2 = new Loca.GeoJSONSource({
                data: {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.997697, 34.208172]
                            },
                            "properties": {
                                "name": "曲江新区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [
                                    108.84722, 34.211645
                                ]
                            },
                            "properties": {
                                "name": "西安高新技术产业开发区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.022726, 34.15384]
                            },
                            "properties": {
                                "name": "西安航天基地"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.781374, 34.279645]
                            },
                            "properties": {
                                "name": "沣东新城"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.886165, 34.282656]
                            },
                            "properties": {
                                "name": "大兴新区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.879178, 34.341189]
                            },
                            "properties": {
                                "name": "汉长安城国家大遗址保护特区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.880116, 34.392991]
                            },
                            "properties": {
                                "name": "草滩生态产业园"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.938932, 34.346635]
                            },
                            "properties": {
                                "name": "西安经济技术开发区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.034521, 34.341018]
                            },
                            "properties": {
                                "name": "浐灞生态区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.055897, 34.404914]
                            },
                            "properties": {
                                "name": "西安国际港务区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [109.112018, 34.304165]
                            },
                            "properties": {
                                "name": "灞河新区"
                            }
                        },
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [108.970457, 34.308907]
                            },
                            "properties": {
                                "name": "大明宫地区"
                            }
                        },
                    ]
                }
            });
            // 文字主体图层
            // var zMarker = new Loca.ZMarkerLayer({
            //     loca: loca,
            //     zIndex: 120,
            //     depth: false
            // });
            // zMarker.setSource(geo2);

            // zMarker.setStyle({
            //     content: (i, feat) => {
            //         var props = feat.properties;
            //         var leftColor = 'rgba(33,33,33,0.6)';
            //         var rightColor = 'rgba(172, 137, 51, 0.3)';
            //         var borderColor = 'rgba(172, 137, 51, 1)';
            //         return (
            //             '<div style="width: 490px; height: 228px; padding: 0 0;">' +
            //             '<p style="display: block; height:80px; line-height:80px;font-size:40px;background-image: linear-gradient(to right, '
            //             + leftColor + ',' + leftColor + ',' + rightColor + ',rgba(0,0,0,0.4)); border:4px solid '
            //             + borderColor + '; color:#fff; border-radius: 15px; text-align:center; margin:0; padding:5px;">' +
            //             props['name'] +
            //             ': ' +
            //             '</p><span style="width: 130px; height: 130px; margin: 0 auto; display: block; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/prism_'
            //             + (true ? 'blue' : 'yellow') + '.png);"></span></div>'
            //         );
            //     },
            //     unit: 'meter',
            //     rotation: 0,
            //     alwaysFront: true,
            //     size: [29000, 20200],
            //     altitude: 0
            // });
            // 浮动三角
            triangleZMarker2 = new Loca.ZMarkerLayer({
                loca: loca,
                zIndex: 119,
                zooms: [2, 12],
                depth: false
            });
            triangleZMarker2.setSource(geo2);
            triangleZMarker2.setStyle({
                content: (i, feat) => {
                    return (
                        '<div style="width: 120px; height: 120px; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/triangle_yellow.png);"></div>'
                    );
                },
                unit: 'meter',
                rotation: 0,
                alwaysFront: true,
                size: [5000, 5000],
                altitude: 30
            });
            triangleZMarker2.addAnimate({
                key: 'altitude',
                value: [0, 30],
                random: true,
                transform: 1000,
                delay: 2000,
                yoyo: true,
                repeat: 999999,
            });
            // 呼吸点 蓝色
            scatterBlue2 = new Loca.ScatterLayer({
                loca,
                zIndex: 110,
                opacity: 1,
                visible: true,
                zooms: [2, 12],
                depth: false,
            });

            scatterBlue2.setSource(geo2);
            scatterBlue2.setStyle({
                unit: 'meter',
                size: [5000, 5000],
                texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_yellow.png',
                altitude: 50,
                duration: 2000,
                animate: true,
                visible: true
            });
        },
        addLight2() {
            loca.ambLight = {
                intensity: 2.2,
                color: '#babedc',
            };
            loca.dirLight = {
                intensity: 0.46,
                color: '#d4d4d4',
                target: [0, 0, 0],
                position: [0, -1, 1],
            };
            loca.pointLight = {
                color: 'rgb(15,19,40)',
                position: [108.967437, 34.179916, 500],
                intensity: 25,
                // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                distance: 3900,
            };
        },
        addLight() {
            // 环境光1
            var ambLight = new Loca.AmbientLight({
                intensity: 0.5,
                color: '#fff',
            });

            var pointLight1 = new Loca.PointLight({
                color: 'rgb(11,255,241)',
                position: [116.455825 - 116.45916 + 108.967437, 39.916603 - 39.917359 + 34.179916, 0],
                intensity: 5,
                // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                distance: 500,
            });

            var pointLight2 = new Loca.PointLight({
                color: 'rgb(255,75,0)',
                position: [116.456598 - 116.45916 + 108.967437, 39.923482 - 39.917359 + 34.179916, 400],
                intensity: 10,
                // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                distance: 1500,
            });

            var pointLight3 = new Loca.PointLight({
                color: '#b3949b',
                position: [116.455546 - 116.45916 + 108.967437, 39.90867 - 39.917359 + 34.179916, 400],
                intensity: 10,
                // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                distance: 1500,
            });
            // 点光源位置改变
            var time = 0;
            var radius = 0.8;
            var height = 400;
            var centerPoint = turf.point([116.455825 - 116.45916 + 108.967437, 39.916603 - 39.917359 + 34.179916]);
            function changeLight() {
                time++;
                var pos = turf.transformTranslate(centerPoint, radius, time).geometry.coordinates;
                var pos2 = turf.transformTranslate(centerPoint, radius, time + 180).geometry.coordinates;
                pointLight2.position = [pos[0], pos[1], height];

                pointLight3.position = [pos2[0], pos2[1], height];

                // 中心点光源
                var t = time * 4 % (height * 2);
                var point1Center = [116.455825 - 116.45916 + 108.967437, 39.916603 - 39.917359 + 34.179916, t > height ? height * 2 - t : t];
                pointLight1.position = point1Center;

                requestAnimationFrame(function () {
                    changeLight();
                });
            }
            changeLight();
            // 平行光1
            var dirLight1 = new Loca.DirectionalLight({
                intensity: 0.6,
                color: '#abffc8',
                target: [0, 0, 0],
                position: [0, 3, 6],
            });
            // 平行光2
            var dirLight2 = new Loca.DirectionalLight({
                intensity: 0.6,
                color: '#5d8cff',
                target: [0, 0, 0],
                position: [0, 13, 13],
            });

            loca.addLight(ambLight);
            loca.addLight(dirLight1);
            loca.addLight(dirLight2);
            loca.addLight(pointLight1);
            loca.addLight(pointLight2);
            loca.addLight(pointLight3);
        },
        changeJson() {
            map.setCenter([108.967737, 34.285968], true);
            this.xinqu = !this.xinqu;
            if (this.xinqu) {
                map.setZoom(11);
                geojsonLayer1.hide();
                geojsonLayer2.show();
                triangleZMarker1.hide();
                scatterBlue1.hide();
                triangleZMarker2.show();
                scatterBlue2.show();
                for (const marker of text1) {
                    marker.hide();
                }
                for (const marker of text2) {
                    marker.show();
                }
            } else {
                map.setZoom(9);
                geojsonLayer2.hide();
                geojsonLayer1.show();
                triangleZMarker2.hide();
                scatterBlue2.hide();
                triangleZMarker1.show();
                scatterBlue1.show();
                for (const marker of text2) {
                    marker.hide();
                }
                for (const marker of text1) {
                    marker.show();
                }
            }
        }
    }
}
</script>
<style scoped lang="scss">
#map-container {
    width: 100%;
    height: 100%;


}
</style>